//菜单栏切换效果
window.onload=function(){
	//1、获取一级导航容器、二级导航容器、向左的图标
	var menuBg=document.getElementsByClassName("menuBg");
	var ulList=document.getElementsByClassName("hidden");
	var iconXZ=document.getElementsByClassName("icon-xiangzuo");
	//为第一个一级导航添加class值currentBg
	menuBg[0].classList.add("currentBg");
	//2、遍历所有的一级导航menuBg
	for(var i=0;i<menuBg.length;i++){
		//保存当前索引
		menuBg[i].index=i;
		//为一级导航添加鼠标单击事件
		menuBg[i].onclick=function(){
			//3、遍历所有的二级导航
			for(var j=0;j<ulList.length;j++){
				//删除所有的一级导航的class值currentBg
				menuBg[j].classList.remove("currentBg");
				//设置所有的二级导航隐藏
				ulList[j].style.display="none";
				//删除所有的向左图标的class值transform
				iconXZ[j].classList.remove("transform");
			}
			//为当前单击的一级导航添加class值currentBg
			this.classList.add("currentBg");
			//设置当前单击的二级导航显示
			ulList[this.index].style.display="block";
			//为当前单击的向左图标添加class值transform
			iconXZ[this.index].classList.add("transform");
		}
	}
}
